<!DOCTYPE html>
<html>
<head>
    <title>openLayers使用TMS方式加载shp切片服务</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <style>
        html,body{
            overflow: hidden;
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #map{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var url="http://localhost:18080/geoserver/gwc/service/tms/1.0.0/ly%3Aly_3201@EPSG%3A4326@png/";
    var projection=new ol.proj.get("EPSG:4326");
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source:  new ol.source.XYZ({
                    projection: projection,
                    tileGrid: ol.tilegrid.createXYZ({extent: ol.proj.get('EPSG:4326').getExtent()}),
                    tileUrlFunction: function (tileCoord) {
                        return url+(tileCoord[0]-1)+ '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.png';
                    }
                })
            })
        ],
        view: new ol.View({
            projection: projection,
            center: [119.232926, 31.922242],
            zoom: 10
        })
    });
</script>
</body>
</html>
